import type { ExtractPropTypes, PropType } from 'vue';
import type { Effect, ImgMode } from '../../types/global';

/**
 * u-lazy-load 组件 Props 类型定义
 * @description 懒加载图片组件属性
 */
export const LazyLoadProps = {
    /** 用户自定义值，在事件触发时回调，用以区分是哪个图片 */
    index: [Number, String],
    /** 要显示的图片 */
    image: { type: String, default: '' },
    /** 图片裁剪模式 */
    imgMode: { type: String as PropType<ImgMode>, default: 'widthFix' },
    /** 占位图片路径 */
    loadingImg: {
        type: String,
        default:
            ''
    },
    /** 加载失败的错误占位图 */
    errorImg: { type: String },
    /** 图片进入可见区域前多少像素时，单位rpx，开始加载图片 */
    threshold: { type: [String, Number] as PropType<string | number>, default: 100 },
    /** 淡入淡出动画的过渡时间 */
    duration: { type: [String, Number] as PropType<string | number>, default: 500 },
    /** 渡效果的速度曲线 */
    effect: { type: String as PropType<Effect>, default: 'ease-in-out' },
    /** 是否使用过渡效果 */
    isEffect: { type: Boolean, default: true },
    /** 圆角值 */
    borderRadius: { type: [String, Number] as PropType<string | number>, default: 0 },
    /** 图片高度，单位rpx */
    height: { type: [String, Number] as PropType<string | number>, default: 450 }
};

export type LazyLoadProps = ExtractPropTypes<typeof LazyLoadProps>;
